<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh-CN">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <title>操作系统自动化安装管理系统</title>
    <meta
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      name="viewport"
    />
    <meta content="" name="description" />
    <meta content="" name="author" />

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link
      href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
      rel="stylesheet"
    />
    <link
      href="assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css"
      rel="stylesheet"
    />
    <link
      href="assets/plugins/bootstrap/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="assets/plugins/font-awesome/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <link href="assets/css/animate.min.css" rel="stylesheet" />
    <link href="assets/css/style.min.css" rel="stylesheet" />
    <link href="assets/css/style-responsive.min.css" rel="stylesheet" />
    <link href="assets/css/theme/default.css" rel="stylesheet" id="theme" />
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== BEGIN BASE JS ================== -->
    <link
      href="assets/plugins/DataTables/css/data-table.css"
      rel="stylesheet"
    />
    <script src="assets/plugins/pace/pace.min.js"></script>
    <!-- ================== END BASE JS ================== -->
  </head>
  <body>
    <!-- begin #page-loader -->
    <div id="page-loader" class="fade in"><span class="spinner"></span></div>
    <!-- end #page-loader -->

    <!-- begin #page-container -->
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
      <!-- begin #header -->
      <div id="header" class="header navbar navbar-default navbar-fixed-top">
        <!-- begin container-fluid -->
        <div class="container-fluid">
          <!-- begin mobile sidebar expand / collapse button -->
          <div class="navbar-header">
            <a href="index.html" class="navbar-brand"
              ><span class="navbar-logo"></span> OSAIMS
            </a>
            <button
              type="button"
              class="navbar-toggle"
              data-click="sidebar-toggled"
            >
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <!-- end mobile sidebar expand / collapse button -->

          <!-- begin header navigation right -->
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown navbar-user">
              <a
                href="javascript:;"
                class="dropdown-toggle"
                data-toggle="dropdown"
              >
                <img
                  src="http://ww1.sinaimg.cn/large/006tNc79ly1g3chy90b1vj303a03c0sp.jpg"
                  alt="avatar"
                />
                <span class="hidden-xs">陶俊存</span> <b class="caret"></b>
              </a>
              <ul class="dropdown-menu animated fadeInLeft">
                <li class="arrow"></li>
                <li><a href="javascript:;">个人中心</a></li>
                <li class="divider"></li>
                <li><a href="javascript:;">系统设置</a></li>
                <li class="divider"></li>
                <li><a href="javascript:;">退出登录</a></li>
              </ul>
            </li>
          </ul>
          <!-- end header navigation right -->
        </div>
        <!-- end container-fluid -->
      </div>
      <!-- end #header -->

      <!-- begin #sidebar -->
      <div id="sidebar" class="sidebar">
        <!-- begin sidebar scrollbar -->
        <div data-scrollbar="true" data-height="100%">
          <!-- begin sidebar nav -->
          <ul class="nav">
            <li class="has-sub">
              <a href="javascript:;">
                <b class="caret pull-right"></b>
                <i class="fa fa-laptop"></i>
                <span>Dashboard</span>
              </a>
              <ul class="sub-menu">
                <li><a href="index.html">Dashboard v1</a></li>
                <li><a href="index_v2.html">Dashboard v2</a></li>
              </ul>
            </li>
            <li class="active">
              <a href="javascript:;">
                <b class="caret pull-right"></b>
                <i class="fa fa-cogs"></i>
                <span>Profile</span>
              </a>
            </li>

            <!-- begin sidebar minify button -->
            <li>
              <a
                href="javascript:;"
                class="sidebar-minify-btn"
                data-click="sidebar-minify"
                ><i class="fa fa-angle-double-left"></i
              ></a>
            </li>
            <!-- end sidebar minify button -->
          </ul>
          <!-- end sidebar nav -->
        </div>
        <!-- end sidebar scrollbar -->
      </div>
      <div class="sidebar-bg"></div>
      <!-- end #sidebar -->

      <!-- begin #content -->
      <div id="content" class="content">
        <!-- begin breadcrumb -->
        <ol class="breadcrumb pull-right">
          <li><a href="javascript:;">Home</a></li>
          <li><a href="javascript:;">Configuration</a></li>
          <li class="active">Distros</li>
        </ol>
        <!-- end breadcrumb -->
        <!-- begin page-header -->
        <h1 class="page-header">Profile</h1>
        <!-- end page-header -->

        <div class="panel panel-inverse">
          <div class="panel-heading">
            <div class="panel-heading-btn">
              <a
                href="javascript:;"
                class="btn btn-xs btn-icon btn-circle btn-default"
                data-click="panel-expand"
                ><i class="fa fa-expand"></i
              ></a>
              <a
                href="javascript:;"
                class="btn btn-xs btn-icon btn-circle btn-warning"
                data-click="panel-collapse"
                ><i class="fa fa-minus"></i
              ></a>
              <a
                href="javascript:;"
                class="btn btn-xs btn-icon btn-circle btn-danger"
                data-click="panel-remove"
                ><i class="fa fa-times"></i
              ></a>
            </div>
            <h4 class="panel-title">输入分发信息</h4>
          </div>
          <!-- panel body -->
          <div class="panel-body">
            <div class="table-responsive">
              <table
                id="data-table"
                class="table table-striped table-bordered"
              ></table>
            </div>
          </div>
        </div>
      </div>
      <!-- end #content -->

      <!-- begin scroll to top btn -->
      <a
        href="javascript:;"
        class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
        data-click="scroll-top"
        ><i class="fa fa-angle-up"></i
      ></a>
      <!-- end scroll to top btn -->
    </div>
    <!-- end page container -->
    <!-- out of page -->
    <!-- #modal-dialog -->
    <div class="modal fade" id="modal-dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">增加profile</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-md-3 control-label">Name</label>
                <div class="col-md-9">
                  <input type="text" class="form-control" id="name" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Distro</label>
                <div class="col-md-9" id="distros">
                  <select class="form-control">
                    <option>选择分发版本</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">kickstart</label>
                <div class="col-md-9" id="kss">
                  <select class="form-control">
                    <option>选择ks</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <a
              href="javascript:;"
              class="btn btn-sm btn-white"
              onclick="ClearForm()"
              >取消</a
            >
            <a
              href="javascript:;"
              class="btn btn-sm btn-primary"
              onclick="SaveProfile()"
              >保存</a
            >
          </div>
        </div>
      </div>
    </div>
    <!-- ================== BEGIN BASE JS ================== -->
    <script src="assets/plugins/jquery/jquery-1.9.1.min.js"></script>
    <script src="assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
    <script src="assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
      <script src="assets/crossbrowserjs/html5shiv.js"></script>
      <script src="assets/crossbrowserjs/respond.min.js"></script>
      <script src="assets/crossbrowserjs/excanvas.min.js"></script>
    <![endif]-->
    <script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
    <!-- ================== END BASE JS ================== -->

    <!-- ================== BEGIN PAGE LEVEL JS ================== -->
    <script src="assets/plugins/DataTables/js/jquery.dataTables.js"></script>
    <script src="assets/plugins/DataTables/js/dataTables.tableTools.js"></script>
    <script src="assets/js/apps.min.js"></script>
    <!-- ================== END PAGE LEVEL JS ================== -->

    <script>
      $(document).ready(function() {
        App.init();
      });
    </script>
    <script>
      $(function() {
        var table = $("#data-table").DataTable({
          dom: 'T<"clear">lfrtip',
          tableTools: {
            // sSwfPath: "assets/plugins/DataTables/swf/copy_csv_xls_pdf.swf"
            aButtons: [
              {
                sExtends: "select",
                sButtonText: "新增profile项目",
                fnClick: function(nButton, oConfig, oFlash) {
                  $.ajax({
                    type: "get",
                    url: "http://10.241.53.227:22222/distros",
                    dataType: "json",
                    success: function(response) {
                      distros = Array.from(response);
                      distrosSelect = $("#distros select");
                      distros.forEach(element => {
                        distrosSelect.append(
                          "<option>" + element["name"] + "</option>"
                        );
                      });
                    }
                  });

                  $.ajax({
                    type: "get",
                    url: "http://10.241.53.227:22222/ks_list",
                    dataType: "json",
                    success: function(response) {
                      kss = Array.from(response);
                      kssSelect = $("#kss select");
                      console.log(response, kssSelect);
                      kss.forEach(element => {
                        kssSelect.append(
                          "<option>" + element["path"] + "</option>"
                        );
                      });
                    }
                  });

                  $("#modal-dialog").modal({
                    backdrop: "static",
                    keyboard: false
                  });
                }
              }
            ]
          },
          ajax: {
            url: "http://10.241.53.227:22222/profiles",
            dataSrc: "", //默认为data
            type: "get",
            error: function() {
              alert("服务器未正常响应，请重试");
            }
          },
          // bAutoWidth: false,
          // aoColumns: [{ sWidth: "20%" }, { sWidth: "60%" }, { sWidth: "20%" }],
          columns: [
            {
              data: "name",
              title: "名称",
              defaultContent: ""
            },
            {
              data: "distro",
              title: "分发",
              defaultContent: ""
            },
            {
              data: null,
              title: "操作",
              defaultContent:
                "<button class='btn btn-success btn-sm'>提交</button>&nbsp;<button class='btn btn-warning btn-sm'>删除</button>"
            }
          ],
          language: {
            sProcessing: "处理中...",
            sLengthMenu: "显示 _MENU_ 项结果",
            sZeroRecords: "没有匹配结果",
            sInfo: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            sInfoEmpty: "显示第 0 至 0 项结果，共 0 项",
            sInfoFiltered: "(由 _MAX_ 项结果过滤)",
            sInfoPostFix: "",
            sSearch: "搜索:",
            sUrl: "",
            sEmptyTable: "表中数据为空",
            sLoadingRecords: "载入中...",
            sInfoThousands: ",",
            oPaginate: {
              sFirst: "首页",
              sPrevious: "上页",
              sNext: "下页",
              sLast: "末页"
            },
            oAria: {
              sSortAscending: ": 以升序排列此列",
              sSortDescending: ": 以降序排列此列"
            }
          }
        });

        var oldValue = "";
        // 双击变input，失焦设置tr及data
        $("#data-table tbody").on("dblclick", "td", function() {
          if (table.cell(this).index().columnVisible == 1) {
            return false;
          }
          var tr = $(this).parents("tr");
          var that = this;
          var tds = tr.children();
          oldValue = $(tds[0]).html();

          $(tds[0]).html(
            "<input type='text' class='form-control' value='" +
              oldValue +
              "' />"
          );
          $(tds[0])
            .children("input")
            .focus();
          $($(tds[0]).children("input")[0]).on("blur", function() {
            var newValue = $($(this)[0]).val();
            $(
              $($(this)[0])
                .parents("tr")
                .children()[0]
            ).html(newValue);
            table.cell(that).data(newValue);
          });
        });

        // 点击
        $("#data-table tbody").on("click", "button", function() {
          var tds = $(this)
            .parents("tr")
            .children();
          var td = tds[0];
          // var index = table.cell(td).index().row;
          // 提交
          if ($(this).hasClass("btn-success")) {
            SubmitData($(td).text());
          } else {
            // 删除
            DeleteData($(td).text());
          }
        });
        // 提交重命名 rename
        function SubmitData(newValue) {
          // 发送指定index的数据
          console.log(oldValue, newValue);
          $.ajax({
            type: "method",
            url: "url",
            data: "data",
            dataType: "dataType",
            success: function(response) {}
          });
        }
        // 删除数据
        function DeleteData(name) {
          $.ajax({
            type: "post",
            url: "http://10.241.53.227:22222/delete",
            data: { profile_name: name },
            dataType: "json",
            success: function() {
              table.ajax.reload();
            }
          });
        }
      });
    </script>

    <script>
      function SaveProfile() {
        var name = $("#name").val();
        var distro_name = $("#distros select")
          .find("option:selected")
          .text();
        var ksfile_name = $("#kss select")
          .find("option:selected")
          .text();
        $.ajax({
          type: "post",
          url: "http://10.241.53.227:22222/new_profile",
          data: {
            name,
            distro_name,
            ksfile_name
          },
          dataType: "json",
          success: function(response) {
            var table = $("#data-table").DataTable();
            table.ajax.reload();
            ClearForm();
          }
        });
      }
      // 恢复初始状态，每次重新请求
      function ClearForm() {
        $("#modal-dialog").modal("hide");
        $("#name").val("");
        $("#distros select").html("<option>选择分发版本</option>");
        $("#kss select").html("<option>选择kickstart版本</option>");
      }
    </script>
  </body>
</html>
